<template>
  <div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold mb-4">文件上传与配置</h2>
    <el-card class="box-card">
      <el-form :model="config" label-width="120px">
        <el-form-item label="选择文件">
          <el-upload
              ref="uploadRef"
              action="#"
              :limit="1"
              :auto-upload="false"
              :on-change="handleFileChange"
              :on-remove="handleFileRemove"
              :file-list="fileList"
          >
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">
                请选择要上传的文件
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="配置项 1 (标题)">
          <el-input v-model="config.config1" placeholder="自动获取" disabled></el-input>
        </el-form-item>

        <el-form-item label="配置项 2 (内容)">
          <el-input v-model="config.config2" placeholder="自动获取" disabled></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="openConfigDialog">通过ai获取相关参数</el-button> </el-form-item>


        <el-form-item>
          <el-button type="success" @click="uploadFile" :disabled="!selectedFile || !config.config1 || !config.config2">
            上传
          </el-button>
        </el-form-item>
      </el-form>

      <div v-if="structuredContent" class="mt-4 text-sm border p-2 rounded bg-gray-100">
        <h4 class="font-semibold mb-2">当前配置结构体:</h4>
        <pre class="whitespace-pre-wrap">{{ JSON.stringify(structuredContent, null, 2) }}</pre>
      </div>

      <div v-if="uploadStatus" class="mt-4 text-sm">
        上传状态: {{ uploadStatus }}
      </div>
      <div v-if="uploadError" class="mt-4 text-sm text-red-500">
        上传错误: {{ uploadError }}
      </div>
    </el-card>

    <el-dialog
        v-model="dialogVisible"
        title="输入标题和内容"
        width="30%"
        :before-close="handleDialogCancel"
    >
      <el-form :model="dialogConfig" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="dialogConfig.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="dialogConfig.content" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogCancel">取消</el-button>
          <el-button type="primary" @click="handleDialogConfirm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'; // 导入 computed
import axios from 'axios'; // 使用 axios 进行 HTTP 请求
import { ElMessage, ElUpload, ElButton, ElInput, ElForm, ElFormItem, ElCard, ElSelect, ElOption, ElDialog } from 'element-plus'; // 导入 Element Plus 组件
import 'element-plus/dist/index.css'; // 导入 Element Plus 样式

const selectedFile = ref(null);
const config = ref({
  config1: '', // 配置项 1 (标题)
  config2: '', // 配置项 2 (内容)
});
const uploadStatus = ref('');
const uploadError = ref('');
const uploadRef = ref(null); // Element Plus Upload 组件的引用
const fileList = ref([]); // 用于 Element Plus Upload 组件显示文件列表

// 弹窗相关的 ref
const dialogVisible = ref(false);
const dialogConfig = ref({
  title: '',
  content: '',
});

// 计算属性，用于显示构建的结构体，现在直接使用 config 的值
const structuredContent = computed(() => {
  if (config.value.config1 || config.value.config2) {
    return {
      title: config.value.config1,
      content: config.value.config2,
    };
  }
  return null; // 如果 config1 和 config2 都为空，则不显示
});


// 文件选择变化时的处理函数
const handleFileChange = (file, files) => {
  selectedFile.value = file.raw; // 获取原始文件对象
  fileList.value = [file]; // 更新文件列表以显示选中的文件
  uploadError.value = ''; // 清除之前的错误信息
};

// 文件移除时的处理函数
const handleFileRemove = (file, files) => {
  selectedFile.value = null;
  fileList.value = [];
  uploadStatus.value = '';
  uploadError.value = '';
  config.value = { config1: '', config2: '' }; // 清空配置项
  dialogConfig.value = { title: '', content: '' }; // 清空弹窗输入
};

// 打开配置弹窗
const openConfigDialog = () => {
  // 打开弹窗前，将当前 config 的值填充到弹窗输入框中，方便编辑
  dialogConfig.value.title = config.value.config1;
  dialogConfig.value.content = config.value.config2;
  dialogVisible.value = true;
};

// 弹窗确定按钮处理函数
const handleDialogConfirm = () => {
  // 将弹窗输入的值赋给 config
  config.value.config1 = dialogConfig.value.title;
  config.value.config2 = dialogConfig.value.content;

  dialogVisible.value = false; // 关闭弹窗
  ElMessage.success('配置项已更新！');
};

// 弹窗取消按钮处理函数
const handleDialogCancel = () => {
  dialogVisible.value = false; // 关闭弹窗
  // 可选：清空弹窗输入框的值
  // dialogConfig.value = { title: '', content: '' };
};


// 上传文件
const uploadFile = async () => {
  if (!selectedFile.value) {
    ElMessage.warning('请先选择一个文件。');
    return;
  }
  if (!config.value.config1 || !config.value.config2) {
    ElMessage.warning('请先通过"输入配置值"按钮填写配置项。');
    return;
  }


  uploadStatus.value = '正在上传...';
  uploadError.value = '';

  const formData = new FormData();
  formData.append('file', selectedFile.value);
  formData.append('config1', config.value.config1); // 发送标题
  formData.append('config2', config.value.config2); // 发送内容


  try {
    // 替换为你的后端上传接口地址
    const response = await axios.post('http://10.137.10.169:8080/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    if (response.data && response.data.message) {
      uploadStatus.value = `上传成功: ${response.data.message}`;
      ElMessage.success(`上传成功: ${response.data.message}`);
      // 重置表单和文件输入
      selectedFile.value = null;
      config.value = { config1: '', config2: '' }; // 重置配置项的值
      dialogConfig.value = { title: '', content: '' }; // 清空弹窗输入
      fileList.value = []; // 清空文件列表
      if (uploadRef.value) {
        uploadRef.value.clearFiles(); // 使用 Element Plus 的方法清空文件输入
      }
    } else {
      uploadStatus.value = '上传完成，但响应格式不正确。';
      ElMessage.warning('上传完成，但响应格式不正确。');
    }

  } catch (error) {
    uploadStatus.value = '';
    let errorMessage = '上传失败';
    if (error.response) {
      errorMessage = `上传失败: ${error.response.data.error || error.response.statusText}`;
    } else if (error.request) {
      errorMessage = '上传失败: 未收到服务器响应。请检查后端服务是否运行。';
    } else {
      errorMessage = `上传失败: ${error.message}`;
    }
    uploadError.value = errorMessage;
    ElMessage.error(errorMessage);
    console.error('上传错误:', error);
  }
};
</script>

<style scoped>
/* Element Plus 组件通常自带样式，这里可以添加一些自定义样式 */
.box-card {
  max-width: 600px; /* 限制卡片最大宽度 */
  margin: 20px auto; /* 居中显示 */
}

/* 弹窗底部按钮的样式 */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
